<template>
  <div style="width:100%;">
    <div id="centreLeft2Chart" style="width:100%; height: 5.15rem;"></div>
  </div>
</template>

<script>
import echartMixins from '@/utils/resizeMixins'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('screen')

export default {
  data () {
    return {
      source: [
        ['indicate', 'name', 'value'],
        ['icratio', this.$t('hJmvnT27XM84LInpnctKE'), 10],
        ['appratio', this.$t('obZac8eYIH9ikfY2nkMXk'), 5],
        ['anonymousratio', this.$t('HmTaK-uzRaW4ztVI4_zu2'), 15]
      ]
    }
  },
  computed: {
    ...mapState(['screendata'])
  },
  mixins: [echartMixins],
  watch: {
    'screendata.ratiotodaydata': {
      deep: true,
      handler () {
        this.makeSource()
        this._chart.setOption({
          dataset: {
            source: _.cloneDeep(this.source)
          }
        })
      }
    }
  },
  mounted () {
    this.makeSource()
    this.draw()
  },
  methods: {
    makeSource () {
      const source = _.cloneDeep(this.source)
      _.forEach(this.screendata.ratiotodaydata, (v, k) => {
        const s = source.find(s => s[0] == k)
        s[2] = v
      })
      this.source = source
    },
    draw () {
      // 基于准备好的dom，初始化echarts实例
      this._chart = this.$echarts.init(document.getElementById('centreLeft2Chart'))
      //  ----------------------------------------------------------------

      this._chart.setOption({
        color: [
          '#37a2da',
          '#32c5e9',
          '#9fe6b8',
          '#ffdb5c',
          '#ff9f7f',
          '#fb7293',
          '#e7bcf3',
          '#8378ea'
        ],
        tooltip: {
          trigger: 'item',
          formatter: function (data) {
            return data.seriesName + '<br/>' + data.name + ' : ' + data.value[2] + ' (' + data.percent.toFixed(1) + '%)'
          }
        },
        toolbox: {
          show: true
        },
        calculable: true,
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          bottom: 0,
          x: 'center',
          // data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6'],
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        series: [
          {
            name: this.$t('bDb1_ffNZr7YswJIooO78'),
            type: 'pie',
            radius: [10, 60],
            roseType: 'area',
            center: ['50%', '40%'],
            encode: {
              tooltip: [2],
              itemName: 'name',
              itemId: 0,
              value: 2
            }
          }
        ],
        dataset: {
          source: _.cloneDeep(this.source)
        }
      })
    }
  },
  destroyed () {
    window.onresize = null
  }
}
</script>

<style lang="scss" scoped>
</style>
